.payment-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding-bottom: 120px;

  .payment-header {
    position: relative;
    padding: 40px 20px 60px;
    overflow: hidden;

    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      
      .bg-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        
        &.circle-1 {
          width: 120px;
          height: 120px;
          top: -60px;
          right: -60px;
        }
        
        &.circle-2 {
          width: 80px;
          height: 80px;
          top: 50px;
          left: -40px;
        }
        
        &.circle-3 {
          width: 60px;
          height: 60px;
          bottom: -30px;
          right: 50px;
        }
      }
    }

    .payment-info-card {
      position: relative;
      background: white;
      border-radius: 20px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

      .payment-icon {
        font-size: 48px;
        margin-bottom: 15px;
      }

      .payment-title {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
      }

      .amount-section {
        .discount-info {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin-bottom: 15px;

          .original-price {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
          }
        }

        .final-amount-wrapper {
          display: flex;
          align-items: baseline;
          justify-content: center;
          margin-bottom: 10px;

          .currency-symbol {
            font-size: 24px;
            color: #ff6b35;
            font-weight: bold;
          }

          .final-amount {
            font-size: 42px;
            color: #ff6b35;
            font-weight: bold;
            margin-left: 5px;
          }
        }

        .save-amount {
          font-size: 14px;
          color: #52c41a;
          background: #f6ffed;
          padding: 4px 12px;
          border-radius: 12px;
          display: inline-block;
        }
      }
    }
  }

  .detail-section {
    margin: 20px;
    margin-top: -20px;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .section-icon {
        font-size: 20px;
        margin-right: 8px;
      }

      .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }

    .detail-card {
      background: white;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;

        .detail-label {
          font-size: 14px;
          color: #666;
        }

        .detail-value {
          font-size: 14px;
          color: #333;
          font-weight: 500;

          &.address {
            max-width: 200px;
            text-align: right;
          }
        }

        .service-type {
          display: flex;
          align-items: center;
          gap: 6px;

          .service-icon {
            font-size: 16px;
          }
        }
      }
    }

    .member-card {
      background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
      border-radius: 16px;
      padding: 25px;
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

      .member-level {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .member-avatar {
          margin-right: 15px;
          background: rgba(255, 255, 255, 0.2);
        }

        .member-info {
          .member-title {
            display: block;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 4px;
          }

          .member-subtitle {
            font-size: 14px;
            opacity: 0.8;
          }
        }
      }

      .member-benefits {
        display: flex;
        justify-content: space-between;

        .benefit-item {
          text-align: center;
          flex: 1;

          .benefit-icon {
            display: block;
            font-size: 20px;
            margin-bottom: 6px;
          }

          .benefit-text {
            font-size: 12px;
            opacity: 0.9;
          }
        }
      }
    }
  }

  .payment-methods-section {
    margin: 20px;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .section-icon {
        font-size: 20px;
        margin-right: 8px;
      }

      .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }

    .payment-methods-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      .payment-method-item {
        padding: 20px;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        &.active {
          background: #f0f9ff;
          border-left: 4px solid #1890ff;
        }

        .method-content {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .method-left {
            display: flex;
            align-items: center;

            .method-icon {
              width: 40px;
              height: 40px;
              border-radius: 8px;
              margin-right: 15px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
            }

            .method-info {
              .method-name {
                display: block;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                margin-bottom: 4px;
              }

              .method-desc {
                font-size: 12px;
                color: #999;
              }
            }
          }

          .method-radio {
            .nut-radio {
              --nutui-radio-button-border-color: #d9d9d9;
              --nutui-radio-button-background: #fafafa;
            }
          }
        }
      }
    }
  }

  .security-notice {
    margin: 20px;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .notice-content {
      display: flex;
      align-items: center;

      .notice-icon {
        font-size: 20px;
        margin-right: 10px;
      }

      .notice-text {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
      }
    }
  }

  .discount-notice {
    margin: 20px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    border-radius: 12px;
    padding: 16px;
    text-align: center;

    .notice-text {
      color: white;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .payment-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    .payment-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .summary-text {
        font-size: 16px;
        color: #333;

        .summary-amount {
          color: #ff6b35;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }

    .pay-btn {
      width: 100%;
      height: 50px;
      border-radius: 25px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

      &:active {
        transform: translateY(1px);
      }
    }
  }
}

/* NutUI 组件样式覆盖 */
.nut-cell-group {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nut-cell {
  padding: 16px 20px !important;
}

.nut-dialog {
  .nut-dialog-content {
    border-radius: 16px !important;
  }
}

.nut-tag {
  border-radius: 12px !important;
}